<template>
  <div class="payment-page">
    <div class="page-header">
      <h1 class="title">微信支付</h1>
      <p class="subtitle">集成微信支付功能，支持多种支付方式</p>
    </div>

    <div class="container">
      <div class="payment-content">
        <!-- 支付表单 -->
        <div class="payment-form">
          <h2>创建支付订单</h2>
          <form @submit.prevent="createPayment">
            <div class="form-group">
              <label for="amount">支付金额 (元)</label>
              <input
                id="amount"
                v-model="paymentForm.amount"
                type="number"
                step="0.01"
                min="0.01"
                required
                placeholder="请输入支付金额"
              />
            </div>
            <div class="form-group">
              <label for="description">商品描述</label>
              <input
                id="description"
                v-model="paymentForm.description"
                type="text"
                required
                placeholder="请输入商品描述"
              />
            </div>
            <button type="submit" class="btn btn-primary" :disabled="isLoading">
              {{ isLoading ? '创建中...' : '创建支付订单' }}
            </button>
          </form>
        </div>

        <!-- 支付历史 -->
        <div class="payment-history">
          <h2>支付记录</h2>
          <div v-if="paymentHistory.length === 0" class="empty-state">
            <p>暂无支付记录</p>
          </div>
          <div v-else class="history-list">
            <div
              v-for="payment in paymentHistory"
              :key="payment.orderId"
              class="history-item"
            >
              <div class="item-info">
                <div class="item-title">{{ payment.description }}</div>
                <div class="item-meta">
                  <span class="order-id">订单号: {{ payment.orderId }}</span>
                  <span class="amount">¥{{ payment.amount.toFixed(2) }}</span>
                </div>
                <div class="item-time">{{ formatTime(payment.createTime) }}</div>
              </div>
              <div class="item-status">
                <span class="status-badge" :class="payment.status">
                  {{ getStatusText(payment.status) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useWeChatStore } from '@/stores/wechat'
import { wechatApi } from '@/api/wechat'
import type { PaymentInfo } from '@/types'

const wechatStore = useWeChatStore()

const paymentForm = ref({
  amount: 0.01,
  description: ''
})

const isLoading = ref(false)

const paymentHistory = computed(() => wechatStore.paymentHistory)

const createPayment = async () => {
  if (!paymentForm.value.amount || !paymentForm.value.description) {
    alert('请填写完整信息')
    return
  }

  isLoading.value = true
  try {
    const response = await wechatApi.createPayment(
      paymentForm.value.amount,
      paymentForm.value.description
    )
    
    if (response.code === 200) {
      // 模拟支付成功
      const newPayment: PaymentInfo = {
        orderId: response.data.orderId,
        amount: paymentForm.value.amount,
        description: paymentForm.value.description,
        status: 'success',
        createTime: new Date().toISOString()
      }
      
      wechatStore.addPayment(newPayment)
      
      // 重置表单
      paymentForm.value = {
        amount: 0.01,
        description: ''
      }
      
      alert('支付订单创建成功！')
    } else {
      alert('创建支付订单失败: ' + response.message)
    }
  } catch (error) {
    console.error('创建支付订单失败:', error)
    alert('创建支付订单失败，请重试')
  } finally {
    isLoading.value = false
  }
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '待支付',
    success: '支付成功',
    failed: '支付失败'
  }
  return statusMap[status] || '未知'
}

const formatTime = (timeString: string) => {
  return new Date(timeString).toLocaleString('zh-CN')
}

onMounted(() => {
  // 模拟加载支付历史
  const mockPayments: PaymentInfo[] = [
    {
      orderId: 'WX202412240001',
      amount: 99.00,
      description: '测试商品1',
      status: 'success',
      createTime: new Date(Date.now() - 3600000).toISOString()
    },
    {
      orderId: 'WX202412240002',
      amount: 199.00,
      description: '测试商品2',
      status: 'success',
      createTime: new Date(Date.now() - 7200000).toISOString()
    }
  ]
  
  mockPayments.forEach(payment => {
    wechatStore.addPayment(payment)
  })
})
</script>

<style scoped>
.payment-page {
  min-height: 100vh;
  position: relative;
}

.page-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 0 0 30px 30px;
  margin-bottom: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.payment-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.payment-form,
.payment-history {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.payment-form h2,
.payment-history h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: #667eea;
}

.btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.history-list {
  max-height: 400px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #f9f9f9;
}

.item-info {
  flex: 1;
}

.item-title {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 4px;
}

.item-time {
  font-size: 0.8rem;
  color: #999;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-badge.success {
  background: #e8f5e8;
  color: #07c160;
}

.status-badge.pending {
  background: #fff3e0;
  color: #ff976a;
}

.status-badge.failed {
  background: #ffebee;
  color: #fa5151;
}

@media (max-width: 768px) {
  .payment-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .title {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
}
</style>
